<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>
#drawing{border:1px solid #ddd;}
</style>
<script src="../第十三章事件/eventObject.js" type="text/javascript"></script>
</head>

<body>
	<canvas id="drawing" width="500" height="500">A drawing of something</canvas>
  
    <script>
    	var drawing = document.getElementById('drawing');
		
		//判断浏览器是否支持canvas(IE8-不支持)
		if(drawing.getContext){
			
			var context=drawing.getContext('2d');
			
			//绘制红色矩形
			context.fillStyle='red'
			
			context.fillRect(10, 10, 100, 100);
			
			context.globalAlpha=0.5;
			
			//绘制蓝色矩形
			context.fillStyle='blue';
			
			context.fillRect(50, 50, 100, 100);
			
			//重置全局透明度
			context.globalAlpha=1;
			//绘制蓝色矩形
			context.fillStyle='green';
			
			context.fillRect(70, 70, 100, 100);
		}
		
		
		
		
    </script>
</body>
</html>
